<template v-cloak>
  <view class="index">
    <commonNav :searchArticleList="searchArticleList"></commonNav>

    <view class="index-content u-skeleton">
      <carousel
        :carouselList="carouselList"
        class="u-skeleton-rect"
        v-if="carouselList.length"
      ></carousel>
      <notice
        :noticeList="noticeList"
        class="u-skeleton-rect"
        v-if="noticeList.length"
      ></notice>
      <hot
        :articleHotlList="articleHotlList"
        class="u-skeleton-rect"
        v-if="articleHotlList.length"
      ></hot>
      <!--     <view class="wx_gzh">
        <navigator url="../gzh/gzh">
          <view class="gzh">
            <view class="gzh-cover" >
        </view>
          </view>
          </navigator>
      </view> -->
      <Anew
        :articleNewlList="articleNewlList"
        class="u-skeleton-rect"
        v-if="articleNewlList.length"
      ></Anew>
    </view>
    <u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF"
    ></u-skeleton>
    <ALoading v-show="aloading"></ALoading>
    <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
    <view class="no-more" v-if="articleNewlList[0]">
      <u-loadmore :status="status" font-size="24" :load-text="loadText" />
    </view>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import commonNav from "../../components/commonNav/commonNav.vue";
import ALoading from "../../components/loading/loading.vue";
import carousel from "./componnets/carousel";
import notice from "./componnets/notice";
import hot from "./componnets/hot";
import Anew from "./componnets/new";
export default {
  components: { commonNav, ALoading, carousel, notice, hot, Anew },
  data() {
    return {
      top: 0,
      stateHeight: 0,
      loading: true, // 是否显示骨架屏组件
      aloading: true,
      carouselList: [],
      noticeList: [],
      articleHotlList: [],
      articleNewlList: [],
      searchArticleList: [],
      loadText: {
        nomore: "我也是有底线的",
      },
    };
  },

  onLoad() {
    // #ifdef MP-WEIXIN
    let stateHeight = 0; //  接收状态栏高度
    let navHeight = uni.getMenuButtonBoundingClientRect().height; //  获取胶囊高度
    let top = 0;
    uni.getSystemInfo({
      success(res) {
        stateHeight = res.statusBarHeight;
      },
    });
    top = wx.getMenuButtonBoundingClientRect().top - stateHeight; //  获取top值
    this.navHeight = navHeight + top * 2;
    this.stateHeight = stateHeight;
    // #endif
  },
  onPullDownRefresh() {
    this.init();
    wx.stopPullDownRefresh();
  },
  onShow() {
    this.getSearchArticleList();
    this.init();
  },
  methods: {
    init() {
      this.getCarouselList();
      this.getNoticetList();
      this.getArticleListHot();
      this.getArticleListNew();
      this.loading = false;
      this.aloading = false;
    },
    getCarouselList() {
      let data = {
        status: 1,
      };
      this.$store.dispatch("carousel/list", data).then((res) => {
        this.carouselList = res.data;
      });
    },
    getNoticetList() {
      let data = {
        status: 1,
      };
      this.$store.dispatch("notice/list", data).then((res) => {
        this.noticeList = [];
        res.data.filter((v) => {
          return this.noticeList.push(v.title);
        });
      });
    },
    getArticleListHot() {
      let data = {
        a_type: 3,
        status: 1,
      };
      this.$store.dispatch("article/list", data).then((res) => {
        this.articleHotlList = res.data;
      });
    },
    getArticleListNew() {
      let data = {
        status: 1,
        uid: uni.getStorageSync("openid"),
      };
      this.$store.dispatch("article/list", data).then((res) => {
        this.articleNewlList = res.data;
      });
    },
    getSearchArticleList() {
      let _self = this;
      let data = {
        status: 1,
        a_type: 1,
      };
      _self.$store.dispatch("article/list", data).then((res) => {
        res.data.filter((v) => {
          return _self.searchArticleList.push(v.title);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index-content {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.index-content::after {
  content: "";
  width: 140%;
  height: 200upx;
  position: absolute;
  z-index: -1;
  left: -20%;
  top: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #8486f8 0%, #d5d5f8 100%);
}
.wx_gzh {
  margin: 0 20upx;
  .gzh {
    padding: 20upx;
    background: #fff;
    .gzh-cover {
      width: 100%;
      height: 20vw;
      background: url("https://creater-1300507222.cos.ap-beijing.myqcloud.com/1642736593573.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 10upx;
    }
  }
}
</style>
